<script setup lang="ts">
import MyGridItem from "@/components/school/MyGridItem.vue";
import {onMounted, ref} from 'vue'
import LessonItem from "@/components/lesson/lesson-item/index.vue";
import type {API} from "@/type/type";
import {toFileUrl} from "@/api/system/file";
import {listCarouselAPI} from "@/api/system/carousel";
import {cancelLessonAPI, getMyLessonAPI, signInLessonAPI} from "@/api/lesson";
import {showConfirmDialog, showFailToast, showSuccessToast, Field} from 'vant';

const images = ref<API.ICarousel[]>([])

const loading = ref<boolean>(false);
const finished = ref(false);
const lessons = ref<API.ILesson[]>([])
const pageSize = ref(3)
const current = ref(1)
const showSignInDialog = ref(false)
const password = ref(''); // 签到密码
const currentLesson = ref<API.ILesson | null>(null);

const fetchLessons = async (reset = false) => {
  if (reset) {
    lessons.value = []
    current.value = 1
    finished.value = false
  }
  if (finished.value) {
    return
  }
  loading.value = true
  // 获取课程列表
  const {data} = await getMyLessonAPI(current.value, pageSize.value)

  if (!data || !data.data || data.data.length === 0) {
    loading.value = false
    finished.value = true
    return
  }
  if (reset) {
    lessons.value = data.data
  } else {
    lessons.value = [...lessons.value, ...data.data]
  }
  // 根据返回数据量判断是否加载完成
  if (data.data.length < pageSize.value) {
    finished.value = true;
  } else {
    current.value++;
  }
  loading.value = false
}

onMounted(async () => {
  const {data} = await listCarouselAPI()
  images.value = data
})
const onLoad = async () => {
  await fetchLessons()
};

const handleLessonCancel = async (lesson: API.ILesson) => {
  showConfirmDialog({
    title: '取消预约',
    message: '确认取消预约课程吗',
  }).then(async () => {
    const {data} = await cancelLessonAPI(lesson.id)
    if (data) {
      showSuccessToast('取消成功')
      // 刷新
      lessons.value = lessons.value.filter(item => item.id !== lesson.id)
    }
  });
}
const handleLessonSignIn = async (lesson: API.ILesson) => {
  showSignInDialog.value = true
  currentLesson.value = lesson
}

const lessonSignIn = async () => {
  if (!password.value) {
    return showFailToast('请输入6位数签到密码')
  }
  if (!currentLesson.value) {
    return showFailToast('请选择课程')
  }
  const {data} = await signInLessonAPI(currentLesson.value.id, password.value)
  if (data) {
    showSuccessToast('签到成功')
    await fetchLessons(true)
  }
}

</script>

<template>
  <van-notice-bar left-icon="volume-o" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。"/>
  <VanSpace direction="vertical" style="width: 100%;" :size="12">
    <van-swipe class="swipe-box" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="image in images" :key="image.id">
        <div class="swipe-image-container">
          <img
              :src="toFileUrl(image.fileId)"
              :alt="image.title || '轮播图'"
              class="swipe-image"
              :style="{ 'object-fit':'cover' }"
          />
        </div>
      </van-swipe-item>
    </van-swipe>

    <van-grid style="margin: 0 10px;border-radius: 12px">
      <MyGridItem text="我的预约" icon="src/assets/icon/reserve-lesson.svg" to="/lesson/student?backPathName=Home"/>
      <MyGridItem text="在线预约" icon="src/assets/icon/order.svg" to="/lesson"/>
      <MyGridItem text="在线练题" icon="src/assets/icon/practice.svg" to="/online-practice"/>
      <MyGridItem text="常见问题" icon="src/assets/icon/common-problem.svg" to="/common/problem"/>
      <MyGridItem text="驾考规则" icon="src/assets/icon/rule.svg" to="/exam/rule"/>
      <MyGridItem text="避坑指南" icon="src/assets/icon/guide.svg" to="/mis/guide"/>
      <MyGridItem text="活动报名" icon="src/assets/icon/activity.svg" to="/activity"/>
      <MyGridItem text="增值服务" icon="src/assets/icon/service.svg" to="/value-added"/>
    </van-grid>

    <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        style="background: rgba(255,255,255,0);"
    >
      <LessonItem
          v-for="lesson in lessons"
          :key="lesson.id"
          :lesson="lesson"
          @lessonCancel="handleLessonCancel"
          @lessonSignIn="handleLessonSignIn"
      />
    </van-list>

    <van-dialog
        v-model:show="showSignInDialog"
        title="请输入6位数签到密码"
        @cancel="password = ''"
        @close="password = ''"
        show-cancel-button
        @confirm="lessonSignIn">
      <div style="padding: 20px 10px;">
        <van-field v-model="password" placeholder="请输入6位数签到密码，eg：123456"/>
      </div>
    </van-dialog>
  </VanSpace>
</template>

<style scoped lang="less">
.swipe-box {
  width: 100%;
  height: 25vh;
  overflow: hidden;

  .swipe-image-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7f8fa; /* 背景色用于填充空白 */

    .swipe-image {
      width: 100%;
      height: 100%;
      object-fit: cover; /* 关键属性：保持比例填充容器 */
      object-position: center; /* 图片居中显示 */
    }
  }
}


.lesson {
  background-color: #fff;
  border-radius: 5px;
  margin-left: 10px;
  margin-right: 10px;
}
</style>
